iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 13
0
Modern Web

喪屍黑白切系列 第 13

Day 13 | 這個漢堡跟我想的不一樣

  • 分享至 

  • xImage
  •  

今天要來講響應式網頁出現頻率超高的漢堡選單啦,
先來科普一下為什麼叫漢堡選單?
照維基百科的說法,
純粹就是覺得外觀長得跟漢堡相似(哪裡像),
他有放一個對照圖,可以去維基看,附上連結

那我們就來進入正題吧~

本篇關鍵字

其實跟昨天的差不多,但我還是列一下

  • <input type="checkbox">
  • label
  • position: absolute

範例檔


HTML

<input type="checkbox" id="navbarToggle">
<header class="main-header">
  <div class="container">
    <h1><a href="#">Zombie@Dump</a></h1>
    <nav>
      <ul class="main-menu">
        <li><a href="#">關於我們</a></li>
        <li><a href="#">作品們</a></li>
        <li><a href="#">聯絡我們</a></li>
      </ul>
    </nav>
    <label class="navbarToggle" for="navbarToggle"><span></span></label>
  </div>
</header>

CSS

a {
  display: block;
  text-decoration: none;
  color: #fff;
}

.main-header {
  width: 100%;
  background-color: rgb(232, 48, 21);
  transition: 1s;
  position: relative;
}

#navbarToggle {
  display: none;
}

.container {
  width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.main-header h1 {
  line-height: 60px;
  margin: 0 15px;
}

.main-menu {
  position: relative;
  position: absolute;
  width: 100%;
  left: 0;
  top: 100%;
  background-color: rgb(232, 48, 21);
  text-align: center;
  display: none;
}

#navbarToggle:checked~.main-header .main-menu {
  display: block;
}

.main-menu li {
  transition: .5s;
}

.main-menu li a {
  padding: 0 15px;
  line-height: 60px;
}

.main-menu li:hover {
  background-color: rgb(176, 41, 20);
}

.navbarToggle {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 1px solid #fff;
  position: relative;
  border-radius: 4px;
}

.navbarToggle span {
  width: 70%;
  height: 3px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: .5s;
}

.navbarToggle span::before,
.navbarToggle span::after {
  content: '';
  width: 100%;
  height: 3px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  transition: .5s;
}

.navbarToggle span::before {
  top: -10px;
}

.navbarToggle span::after {
  bottom: -10px;
}

#navbarToggle:checked~.main-header .navbarToggle span {
  background-color: transparent;
}

#navbarToggle:checked~.main-header .navbarToggle span::before {
  top: 0;
  transform: rotate(45deg);
}

#navbarToggle:checked~.main-header .navbarToggle span::after {
  top: 0;
  transform: rotate(135deg);
}

喪屍分解

  • 利用 <input type="checkbox">:checked 來製作出收合的開關
  • 點擊 label 可以觸發 input 被選取,要注意的是 label 中的 for 的名稱,要跟 input 的 id 相同才能被連動
  • 使用 親代選取器,要注意 <input type="checkbox"> 放置的位置,附上選取器說明
  • 利用position: absolute.main-menu 定位到 .main-header 下方,.main-menu寬度設定為width: 100%,要定位的父層設定 position: relative
  • 使用 span 製作出漢堡的其中一槓,再利用 ::before::after 做出上下兩槓,再搭配 transform: rotate 做出 X 動畫

以上就是今天的內容,如果有講不對的地方再請各位留言讓我知道,謝謝。
明天要講的是交錯漂浮版。


上一篇
Day 12 | 看我伸縮自如的...選單
下一篇
Day 14 | 錯綜複雜的交錯漂浮版
系列文
喪屍黑白切30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言